<template>
    <div class="reflect_page">
      <van-nav-bar
        title="提现设置"
        left-arrow
        @click-left="$router.back()"
        left-text="返回"
      />
      <van-form @submit="onSubmit">
        <van-field autocomplete="off" name="intoWay"
                   label="提现到"
                   required
                   :rules="[{ required: true, message: '未选择提现方式' }]"
        >
          <template #input>
            <van-radio-group @change="radioChange" v-model="intoWay" direction="horizontal">
              <van-radio name="wechat">微信</van-radio>
              <!-- <van-radio name="alipay">支付宝</van-radio> -->
            </van-radio-group>
          </template>
        </van-field>
        
        <van-field autocomplete="off"
          type="text"
          v-model="cashwechat"
          name="wxCode"
          required
          :rules="[{ required: true, message:intoWay == 'wechat' ? '微信号必须输入！':'支付宝必须输入！' }]"
          :label="intoWay == 'wechat' ? '提现到微信号' : '提现到支付宝'"
          :placeholder="intoWay == 'wechat' ? '输入收款人常用的微信号' : '输入收款人常用的支付宝'"
        />
        <van-field autocomplete="off"
          type="number"
          v-model="wxPhone"
          name="wxPhone"
          required
          :rules="[{ required: true, message:intoWay == 'wechat' ? '微信的手机号必须输入！':'支付宝的手机号必须输入！' }]"
          :label="intoWay == 'wechat' ? '提现到绑定微信的手机号' :'提现到绑定支付宝的手机号'"
          :placeholder="intoWay == 'wechat' ? '请输入绑定收款人常用微信的手机号': '请输入绑定收款人常用支付宝的手机号'"
        />
        <!-- <van-field autocomplete="off" name="intoWay"
            :label="intoWay == 0 ? '提现到微信收款二维码' : '提现到支付宝收款二维码'"
            required
            
        >
          <template #input>
            <van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
              <van-icon name="photograph" size="55" color="#ccc"/>
            </van-uploader>
          </template>
        </van-field> -->

        <van-field
          autocomplete="off"
          required
          :label="intoWay == 'wechat' ? '提现到微信收款二维码' : '提现到支付宝收款二维码'"
        >
          <template #input>
            <div v-show="intoWayLength == 1" style="margin-right:4px">
              <van-image
                cover
                width="2.1rem"
                height="2.1rem"
                :src="intoWay == 'wechat' ? allUserInfo.cashwechatavatar : allUserInfo.cashalipayavatar"
              />
            </div>
            <van-uploader
              v-model="avatarList"
              :delete="(avatar = '')"
              :max-count="1"
              :after-read="uploadPhotoList"
              :preview-options="{
                closeable: true
              }"
            />
            
            
          </template>
        </van-field>
        

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            确定设置
          </van-button>
        </div>
        </van-form>
    </div>
</template>

<script>
  import {Toast} from 'vant';
import {cosUploadImg} from '@/utils/cosUpload.js'
import { setTimeout } from 'timers';
import {mapGetters} from 'vuex';
  const cashWay = {
    card: '银行卡',
    wechat: '微信',
    qq: 'QQ',
    alipay: '支付宝',
  };

  export default {
    name: 'withdraw',
    data(){
      return{
        avatarList: [],
        avatar:'',
        wxPhone:'',
        cashWay,
        money:'',
        intoWay:"wechat",
        intoWayLength:0,
        cashwechat:'',
        name:'',
        account:'',
        payPwd: '',
        pattern:  /^[0-9]+(\.[0-9]{0,2})?$/,
        cashOutSign: '',
      }
    },
    computed: {
      ...mapGetters(['allUserInfo']),
    },
    created(){
      var obj = this.allUserInfo.cashtype.split(",");
      if(this.allUserInfo.cashtype && obj.length>0){
        this.intoWayLength = 1
        this.intoWay = obj[0]
        if(obj[0] == "wechat"){
          this.cashwechat = this.allUserInfo.cashwechat
          this.wxPhone = this.allUserInfo.cashwechatmobilephone
          this.avatar = this.allUserInfo.cashwechatavatar
        }else{
          this.cashwechat = this.allUserInfo.cashalipay
          this.wxPhone = this.allUserInfo.cashalipaymobilephone
          this.avatar = this.allUserInfo.cashalipayavatar
        }
      }else{
        this.intoWay = this.allUserInfo.cashtype
        if(this.intoWay == "wechat"){
          this.cashwechat = this.allUserInfo.cashwechat
          this.wxPhone = this.allUserInfo.cashwechatmobilephone
          this.avatar = this.allUserInfo.cashwechatavatar
        }else{
          this.cashwechat = this.allUserInfo.cashalipay
          this.wxPhone = this.allUserInfo.cashalipaymobilephone
          this.avatar = this.allUserInfo.cashalipayavatar
        }
      }
      if (this.$route.params.id){
        this.cashOutSign = this.$route.params.id
      } else {
        //this.$router.back()
      }
    },

    methods:{
      radioChange(e){
        if(e == "wechat"){
          this.cashwechat = "wechat"
          this.wxPhone = this.allUserInfo.cashwechatmobilephone
          this.avatar = this.allUserInfo.cashwechatavatar
        }else{
          this.cashwechat = "alipay"
          this.wxPhone = this.allUserInfo.cashalipaymobilephone
          this.avatar = this.allUserInfo.cashalipayavatar
        }
      },
      onRead(file) {
        console.log(file)
      },
      // 封装公共的上传图片函数
    async _reqUploadPicture(picture) {
      let formData = new FormData()
      formData.append('filename', picture.file)
      // 公司认证的图片
      const img_type = 'job_environment'
      // const res = await this.$api.uploadImg.uploadPhotos(formData, img_type)
      const res = await cosUploadImg(picture.file, img_type)
      if (res.code === 200) {
        return res.data
      }
    },
      uploadPhotoList(picture) {
        picture.status = 'uploading'
        picture.message = '上传中...'
        this._reqUploadPicture(picture).then(url => {
          this.avatar = url
          if (!url) {
            Toast('图片上传失败!')
            picture.status = 'failed'
            picture.message = '上传失败'
          } else {
            picture.status = 'done'
          }
        })
      },
      async onSubmit(values){
        let _self = this
        if(_self.avatar == '' && _self.intoWay == 'wechat'){
          _self.avatar = this.allUserInfo.cashwechatavatar
        }
        if(_self.avatar == '' && _self.intoWay == 'alipay'){
          _self.avatar = this.allUserInfo.cashalipayavatar
        }
        const params = {//wechat -- 微信 alipay -- 支付宝 bank -- 银行卡
          avatar: _self.avatar,
          cashid: _self.cashwechat,
          cashmobilephone:  _self.wxPhone,
          cashtype: _self.intoWay,
        };
        const res = await _self.$api.user.Setcahinfo(params)
        console.log(res)
        if(res.code == 200){
          Toast('设置成功!')
          setTimeout(function(){
            _self.$router.back()
          },1000)
        }
      },

      




    }
  }
</script>

<style scoped>

</style>
